<template>
	<view class="contacts">
		<view class="add">
			<view class="add_ql" @click="addGroup('bottom') ">
				+添加群聊
			</view>
			<view class="add_hy" @click="addFriends">
				+添加好友
			</view>
		</view>

		<view class="contacts-container">
			<view class="user-list">
				<view class="user-list-item" v-for="(group, id) in groups" :key="id" @click="groupChat(group)">
					<view class="user-item-avatar">
						<image :src="group.avatar" />
					</view>
					<view class="user-item-info">
						<span class="user-item-info__name">{{ group.name }}</span>
					</view>
				</view>
			</view>
			<view class="contacts-title" v-if="friends && friends.length !==0">联系人</view>
			<view class="user-list">
				<view class="user-list-item" v-for="(friend, id) in friends" :key="id" @click="privateChat(friend)">
					<view class="user-item-avatar">
						<image :src="friend.avatar"></image>
					</view>
					<view class="user-item-info">
						<span class="user-item-info__name">{{ friend.name }}</span>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" background-color="#fff">
			<view class="determine" @click="determine">
				<text class="tx"
					:style="{color:this.userList[0]?'#fff':'rgb(158, 158, 158)',backgroundColor:this.userList[0]?'rgb(37, 189, 161)':'rgb(235, 235, 235)'}">确定</text>
			</view>
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<vite class="user-list">
					<vite class="user-list-item" v-for="(friend, id) in friends" :key="id">
						<checkbox value="cb" @click="addPush(friend.id)" />
						<vite class="user-item-avatar">
							<image :src="friend.avatar"></image>
						</vite>
						<vite class="user-item-info">
							<span class="user-item-info__name">{{ friend.name }}</span>
						</vite>
					</vite>
				</vite>

			</view>
		</uni-popup>

		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="群昵称" placeholder="请输入群昵称"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>

	</view>
</template>

<script>
	import restApi from '../lib/restapi';

	export default {
		name: 'contacts',
		data() {
			return {
				friends: [],
				groups: [],
				type: 'center',
				userList: [],


			}
		},
		onShow() {
			let currentUser = uni.getStorageSync('currentUser');;
			console.log(currentUser, 'contacts', 42);
			this.friends = restApi.findFriends(currentUser);
			console.log(this.friends);
			uni.request({
				url: 'http://localhost:3001/lx/getGroups', //仅为示例，并非真实接口地址。
				success: (res) => {
					let data = []
					res.data.data.forEach(item => {
						item = JSON.parse(JSON.stringify(item).replace('_id', 'id'))
						data.push(item)
					})
					this.groups = restApi.findGroups(currentUser, data);
					console.log(this.groups, 888888);
				}
			});

		},
		methods: {
			privateChat(friend) {
				uni.navigateTo({
					url: './privateChat?to=' + friend.id
				});
			},
			// 进入群聊
			groupChat(group) {
				uni.navigateTo({
					url: './groupChat?to=' + group.id
				});
			},
			addFriends() {
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			addGroup(type) {
				this.type = type
				// // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			addPush(id) {

				let s = this.userList.includes(id)
				console.log(s);
				if (s) {
					this.userList = this.userList.filter(item => item != id)

				} else {
					this.userList.push(id)
				}
			},
			determine() {
				let currentUser = uni.getStorageSync('currentUser');
				let s = this.userList.includes(currentUser.id)
				if (this.userList.length == 0) {
					this.userList = []
				} else if (s) {
					this.userList = []
				} else {
					this.userList.push(currentUser.id)
					this.$refs.inputDialog.open()
					this.$refs.popup.close()
				}
				console.log(this.userList, 139);
			},
			dialogInputConfirm(val) {
				let currentUser = uni.getStorageSync('currentUser');
				uni.request({
					url: "http://114.55.67.104:3000/whq/addGroups", //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						name: val,
						avatar: currentUser.avatar,
						userList: this.userList,
					},
					success: (res) => {
						let data = []
						res.data.data.forEach(item => {
							item = JSON.parse(JSON.stringify(item).replace('_id', 'id'))
							data.push(item)
						})
						this.groups = restApi.findGroups(currentUser, data);
						// 关闭窗口后，恢复默认内容
						this.$refs.inputDialog.close()
					}
				});
			},

		}
	}
</script>

<style>
	.contacts {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.contacts .contacts-container {
		width: 100%;
		height: 100%;
		overflow: auto;
	}

	.contacts .user-list-item {
		height: 132rpx;
		padding-left: 32rpx;
		display: flex;
		align-items: center;
	}

	.contacts .contacts-title {
		height: 80rpx;
		line-height: 100rpx;
		font-size: 34rpx;
		color: #666666;
		background: #F3F4F7;
		text-indent: 44rpx;
	}

	.contacts .user-list {
		flex-grow: 1;
		background: #ffffff;
		display: flex;
		flex-direction: column;
	}

	.contacts .user-item-avatar {
		width: 96rpx;
		height: 96rpx;
		margin-right: 32rpx;
		overflow: hidden;
		position: relative;
	}

	.contacts .user-item-avatar image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.contacts .user-item-info {
		height: 130rpx;
		padding-right: 32rpx;
		line-height: 88rpx;
		flex-grow: 1;
		border-bottom: 1px solid #EFEFEF;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.contacts .user-item-info__name {
		font-size: 34rpx;
		font-family: Source Han Sans CN;
		font-style: normal;
		font-weight: bold;
		color: #262628;
	}

	.contacts .user-item-info__tips {
		height: 44rpx;
		width: 64rpx;
		border-radius: 24rpx;
		font-size: 34rpx;
		line-height: 44rpx;
		background: #D02129;
		color: #ffffff;
		font-family: Cabin;
		text-align: center;
	}

	.contacts .online-dot {
		position: absolute;
		width: 32rpx !important;
		height: 32rpx !important;
		right: 0;
		bottom: 0;
	}

	.popup-content {
		height: 85vh;
	}

	.add {
		font-size: 40rpx;
		font-weight: bold;
		background-color: #fff;
		padding: 30rpx;
		display: flex;
		justify-content: space-around;
	}

	.add_hy {}

	.determine {
		text-align: right;
		padding-top: 30rpx;
	}

	.tx {
		margin: 30rpx;
		padding: 5rpx 10rpx;
		font-size: 32rpx;
	}
</style>